<template>
	<div>
		<div class="videoBox" v-for="item in videoList" :key="item.id">
			<el-image @click="toplay(item.video_url, item.id)" style="width: 150px; height: 150px" :src="baseUrl+item.image_url" ></el-image>
			<br>
			<span>{{ item.title }}</span>
		</div>
		<!-- 分页 -->
		<br>
		<el-pagination class="page" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[1, 8, 50, 100]"
		 :page-size="page_size" layout="total, prev, pager, next, jumper" :total="total">
		</el-pagination>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl: "http://127.0.0.1/thinkphp/public/uploads/",
				videoList:[],
				page: 1,
				page_size: 8,
				total: 0,
				category: "",
				title: "",
			}
		},
		watch: {
			'$route': 'getquery',
		},
		created() {
			this.getVideoList();
		},
		methods: {
			getVideoList() {
				
				let url = "videoList/"+this.page+"/"+this.page_size;
				if(this.category){
					url += "?category="+this.category;
				}
				if(this.title){
					url += "?title="+this.title;
				}
				// console.log(url);
				this.$http.get(url).then(res => {
					this.videoList = res.data.data;
					this.total = res.data.total;
				})
			},
			toplay(url, id) {
				this.$router.push({
					path: "/user/play",
					name: "userplay",
					params: {
						"video_url": url,
						"v_id": id,
					}
				});
			},
			handleCurrentChange(current) {
				this.page = current;
				this.getVideoList();
			},
			handleSizeChange(size) {
				this.page_size = size;
				this.getVideoList();
			},
			
			getquery() {
				this.category = this.$route.query.video_category;
				this.title = this.$route.query.video_title;
				this.getVideoList();
			},
		}
	}
</script>

<style>
	.videoBox {
		background-color: aliceblue;
		width: 200px;
		height: 200px;
		float: left;
		margin: 10px;
	}
	.page {
		clear: both;
	}
</style>
